<template>
  <div class="bgc">
    <h1 class="title">竹影回响</h1>
    <div class="bambooContainer" style="left: 140px" @mouseleave="changeId">
      <transition-group>
        <div
          class="bambooItem1"
          v-for="event in dongwuList"
          :key="event.eventId"
          :class="{
            bambooItem1: event.bambooChange == 1,
            bambooItem2: event.bambooChange == 2,
            bambooItem3: event.bambooChange == 3,
          }"
          @mouseenter="change(event, 'dongwuList')"
        >
          <div class="bambooCard" v-show="showCardInfo.Id == event.eventId">
            <div
              style="width: 250px; height: 130px; float: right; padding: 10px"
            >
              <p
                style="
                  font-size: 15px;
                  color: #966664;
                  margin-left: 30px;
                  text-align: left;
                "
              >
                {{ showCardInfo.content }}
              </p>
              <div style="height: 40px; margin-left: 30px">
                <span style="font-size: 13px">{{ showCardInfo.person }} </span>
                <span style="font-size: 13px">{{ showCardInfo.time }} </span>
              </div>
            </div>
          </div>
        </div>
      </transition-group>
      <div
        class="fontAdd"
        style="font-size: 20px; font-weight: 700; color: #966664"
      >
        东吴
      </div>
    </div>
    <div class="bambooContainer" style="left: 290px" @mouseleave="changeId">
      <transition-group>
        <div
          class="bambooItem1"
          v-for="event in dongjinList"
          :key="event.eventId"
          :class="{
            bambooItem1: event.bambooChange == 1,
            bambooItem2: event.bambooChange == 2,
            bambooItem3: event.bambooChange == 3,
          }"
          @mouseenter="change(event, 'dongjinList')"
        >
          <div class="bambooCard" v-show="showCardInfo.Id == event.eventId">
            <div
              style="width: 250px; height: 130px; float: right; padding: 10px"
            >
              <p
                style="
                  font-size: 15px;
                  color: #966664;
                  margin-left: 30px;
                  text-align: left;
                "
              >
                {{ showCardInfo.content }}
              </p>
              <div style="height: 40px; margin-left: 30px">
                <span style="font-size: 13px">{{ showCardInfo.person }} </span>
                <span style="font-size: 13px">{{ showCardInfo.time }} </span>
              </div>
            </div>
          </div>
        </div>
      </transition-group>

      <div
        class="fontAdd"
        style="font-size: 20px; font-weight: 700; color: #966664"
      >
        东晋
      </div>
    </div>
    <div class="bambooContainer" style="left: 440px" @mouseleave="changeId">
      <transition-group>
        <div
          class="bambooItem1"
          v-for="event in liuchaoList"
          :key="event.eventId"
          :class="{
            bambooItem1: event.bambooChange == 1,
            bambooItem2: event.bambooChange == 2,
            bambooItem3: event.bambooChange == 3,
          }"
          @mouseenter="change(event, 'liuchaoList')"
        >
          <div class="bambooCard" v-show="showCardInfo.Id == event.eventId">
            <div
              style="width: 250px; height: 130px; float: right; padding: 10px"
            >
              <p
                style="
                  font-size: 15px;
                  color: #966664;
                  margin-left: 30px;
                  text-align: left;
                "
              >
                {{ showCardInfo.content }}
              </p>
              <div style="height: 40px; margin-left: 30px">
                <span style="font-size: 13px">{{ showCardInfo.person }} </span>
                <span style="font-size: 13px">{{ showCardInfo.time }} </span>
              </div>
            </div>
          </div>
        </div>
      </transition-group>
      <div
        class="fontAdd"
        style="font-size: 20px; font-weight: 700; color: #966664"
      >
        六朝
      </div>
    </div>
    <div class="bambooContainer" style="left: 590px" @mouseleave="changeId">
      <transition-group>
        <div
          class="bambooItem1"
          v-for="event in tangList"
          :key="event.eventId"
          :class="{
            bambooItem1: event.bambooChange == 1,
            bambooItem2: event.bambooChange == 2,
            bambooItem3: event.bambooChange == 3,
          }"
          @mouseenter="change(event, 'tangList')"
        >
          <div class="bambooCard" v-show="showCardInfo.Id == event.eventId">
            <div
              style="width: 250px; height: 130px; float: right; padding: 10px"
            >
              <p
                style="
                  font-size: 15px;
                  color: #966664;
                  margin-left: 30px;
                  text-align: left;
                "
              >
                {{ showCardInfo.content }}
              </p>
              <div style="height: 40px; margin-left: 30px">
                <span style="font-size: 13px">{{ showCardInfo.person }} </span>
                <span style="font-size: 13px">{{ showCardInfo.time }} </span>
              </div>
            </div>
          </div>
        </div>
      </transition-group>
      <div
        class="fontAdd"
        style="font-size: 20px; font-weight: 700; color: #966664"
      >
        唐朝
      </div>
    </div>
    <div class="bambooContainer" style="left: 740px" @mouseleave="changeId">
      <transition-group>
        <div
          class="bambooItem1"
          v-for="event in nantangList"
          :key="event.eventId"
          :class="{
            bambooItem1: event.bambooChange == 1,
            bambooItem2: event.bambooChange == 2,
            bambooItem3: event.bambooChange == 3,
          }"
          @mouseenter="change(event, 'nantangList')"
        >
          <div class="bambooCard" v-show="showCardInfo.Id == event.eventId">
            <div
              style="width: 250px; height: 130px; float: right; padding: 10px"
            >
              <p
                style="
                  font-size: 15px;
                  color: #966664;
                  margin-left: 30px;
                  text-align: left;
                "
              >
                {{ showCardInfo.content }}
              </p>
              <div style="height: 40px; margin-left: 30px">
                <span style="font-size: 13px">{{ showCardInfo.person }} </span>
                <span style="font-size: 13px">{{ showCardInfo.time }} </span>
              </div>
            </div>
          </div>
        </div>
      </transition-group>
      <div
        class="fontAdd"
        style="font-size: 20px; font-weight: 700; color: #966664"
      >
        南唐
      </div>
    </div>
    <div class="bambooContainer" style="left: 890px" @mouseleave="changeId">
      <transition-group>
        <div
          class="bambooItem1"
          v-for="event in songList"
          :key="event.eventId"
          :class="{
            bambooItem1: event.bambooChange == 1,
            bambooItem2: event.bambooChange == 2,
            bambooItem3: event.bambooChange == 3,
          }"
          @mouseenter="change(event, 'songList')"
        >
          <div class="bambooCard" v-show="showCardInfo.Id == event.eventId">
            <div
              style="width: 250px; height: 130px; float: right; padding: 10px"
            >
              <p
                style="
                  font-size: 15px;
                  color: #966664;
                  margin-left: 30px;
                  text-align: left;
                "
              >
                {{ showCardInfo.content }}
              </p>
              <div style="height: 40px; margin-left: 30px">
                <span style="font-size: 13px">{{ showCardInfo.person }} </span>
                <span style="font-size: 13px">{{ showCardInfo.time }} </span>
              </div>
            </div>
          </div>
        </div>
      </transition-group>
      <div
        class="fontAdd"
        style="font-size: 20px; font-weight: 700; color: #966664"
      >
        宋朝
      </div>
    </div>
    <div class="bambooContainer" style="left: 1040px" @mouseleave="changeId">
      <transition-group>
        <div
          class="bambooItem1"
          v-for="event in mingList"
          :key="event.eventId"
          :class="{
            bambooItem1: event.bambooChange == 1,
            bambooItem2: event.bambooChange == 2,
            bambooItem3: event.bambooChange == 3,
          }"
          @mouseenter="change(event, 'mingList')"
        >
          <div class="bambooCard" v-show="showCardInfo.Id == event.eventId">
            <div
              style="width: 250px; height: 130px; float: right; padding: 10px"
            >
              <p
                style="
                  font-size: 15px;
                  color: #966664;
                  margin-left: 30px;
                  text-align: left;
                "
              >
                {{ showCardInfo.content }}
              </p>
              <div style="height: 40px; margin-left: 30px">
                <span style="font-size: 13px">{{ showCardInfo.person }} </span>
                <span style="font-size: 13px">{{ showCardInfo.time }} </span>
              </div>
            </div>
          </div>
        </div>
      </transition-group>
      <div
        class="fontAdd"
        style="font-size: 20px; font-weight: 700; color: #966664"
      >
        明朝
      </div>
    </div>
    <div class="bambooContainer" style="left: 1190px" @mouseleave="changeId">
      <transition-group>
        <div
          class="bambooItem1"
          v-for="event in qingList"
          :key="event.eventId"
          :class="{
            bambooItem1: event.bambooChange == 1,
            bambooItem2: event.bambooChange == 2,
            bambooItem3: event.bambooChange == 3,
          }"
          @mouseenter="change(event, 'qingList')"
        >
          <div class="bambooCard2" v-show="showCardInfo.Id == event.eventId">
            <div
              style="width: 250px; height: 130px; float: left; padding: 10px"
            >
              <p style="font-size: 15px; color: #966664; text-align: left">
                {{ showCardInfo.content }}
              </p>
              <div style="height: 40px">
                <span style="font-size: 13px">{{ showCardInfo.person }} </span>
                <span style="font-size: 13px">{{ showCardInfo.time }} </span>
              </div>
            </div>
          </div>
        </div>
      </transition-group>
      <div
        class="fontAdd"
        style="font-size: 20px; font-weight: 700; color: #966664"
      >
        清朝
      </div>
    </div>
    <div class="bambooContainer" style="left: 1340px" @mouseleave="changeId">
      <transition-group>
        <div
          class="bambooItem1"
          v-for="event in jindaiList"
          :key="event.eventId"
          :class="{
            bambooItem1: event.bambooChange == 1,
            bambooItem2: event.bambooChange == 2,
            bambooItem3: event.bambooChange == 3,
          }"
          @mouseenter="change(event, 'jindaiList')"
        >
          <div class="bambooCard2" v-show="showCardInfo.Id == event.eventId">
            <div
              style="width: 250px; height: 130px; float: left; padding: 10px"
            >
              <p
                style="
                  font-size: 15px;
                  color: #966664;
                  text-align: left;
                  width: 230px;
                "
              >
                {{ showCardInfo.content }}
              </p>
              <div style="height: 40px">
                <span style="font-size: 13px">{{ showCardInfo.person }} </span>
                <span style="font-size: 13px">{{ showCardInfo.time }} </span>
              </div>
            </div>
          </div>
        </div>
      </transition-group>
      <div
        class="fontAdd"
        style="font-size: 20px; font-weight: 700; color: #966664"
      >
        近代
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "events",
  data() {
    return {
      dongwuList: [],
      dongjinList: [],
      liuchaoList: [],
      tangList: [],
      nantangList: [],
      songList: [],
      mingList: [],
      qingList: [],
      jindaiList: [],
      showCardInfo: {
        Id: 1,
        content: "这种傻逼就不要跟他多讲了",
        person: "人物:陈作霖、陈作仪",
        time: "时间:1924年",
      },
      dongwuList1: [
        {
          eventId: 10,
          bambooChange: 1,
          showCard: 0,
          eventName: "zhong1",
          evnetInfo: "孙权借祥瑞“黄龙”出现之机称帝",
          eventTime: "时间:229年",
          person: "人物:孙权",
        },
        {
          eventId: 11,
          bambooChange: 2,
          eventName: "zhong1",
          evnetInfo: "僧人康僧会访建业，江南佛法始兴",
          eventTime: "时间:247年",
          person: "人物:康僧会",
        },
      ],
      dongjinList1: [
        {
          eventId: 20,
          bambooChange: 1,
          eventName: "zhong1",
          evnetInfo: "孝武帝司马曜诏徐广校秘阁四部",
          eventTime: "时间:391年",
          person: "人物:法显",
        },
        {
          eventId: 21,
          bambooChange: 2,
          eventName: "zhong1",
          evnetInfo: "刘裕攻入长安，得图书四千卷",
          eventTime: "时间:417年",
          person: "人物:刘裕",
        },
      ],
      liuchaoList1: [
        {
          eventId: 30,
          bambooChange: 1,
          eventName: "zhong1",
          evnetInfo: "元嘉十五年立儒学馆",
          eventTime: "时间:438年",
          person: "人物:何承天",
        },
        {
          eventId: 31,
          bambooChange: 2,
          eventName: "zhong1",
          evnetInfo: "孝武帝依诸儒议，唯奏文乐",
          eventTime: "时间:455年",
          person: "人物:王宏",
        },
        {
          eventId: 32,
          bambooChange: 3,
          eventName: "zhong1",
          evnetInfo: "武帝使尚书左丞殷淡为文帝章太后庙造乐章",
          eventTime: "时间:457-464年",
          person: "",
        },
        {
          eventId: 33,
          bambooChange: 1,
          eventName: "zhong1",
          evnetInfo: "王俭编成《宋元徽元年四部书目录》与《七志》三十卷",
          eventTime: "时间:473年",
          person: "人物:王俭",
        },
        {
          eventId: 34,
          bambooChange: 2,
          eventName: "zhong1",
          evnetInfo: "顺帝接受王僧虔建议，使萧惠基调正清商音律",
          eventTime: "时间:478年",
          person: "人物:王僧虔、萧惠基",
        },
        {
          eventId: 35,
          bambooChange: 3,
          eventName: "zhong1",
          evnetInfo: "伏曼容上表认为应该集英儒、删纂雅乐",
          eventTime: "时间:484年",
          person: "",
        },
        {
          eventId: 37,
          bambooChange: 2,
          eventName: "zhong1",
          evnetInfo: "建业城池凋敝，梁元帝决定迁都江陵",
          eventTime: "时间:552年",
          person: "",
        },
        {
          eventId: 36,
          bambooChange: 1,
          eventName: "zhong1",
          evnetInfo: "刘勰影响太子萧统编《文选》",
          eventTime: "时间:519年",
          person: "人物:刘勰、萧统",
        },
      ],
      tangList1: [
        {
          eventId: 40,
          bambooChange: 1,
          eventName: "zhong1",
          evnetInfo: "韦庄作诗感叹钟山苍凉，《忆昔》写莫愁",
          eventTime: "",
          person: "人物:韦庄",
        },
        {
          eventId: 41,
          bambooChange: 2,
          eventName: "zhong1",
          evnetInfo: "温庭筠《题竹谷神祠诗》表明蒋王的影响力",
          eventTime: "",
          person: "人物:温庭筠、李嘉祐",
        },
        {
          eventId: 42,
          bambooChange: 3,
          eventName: "zhong1",
          evnetInfo: "李公佐破案，帮助谢小娥找到凶手",
          eventTime: "时间:813年",
          person: "人物:李公佐、齐物、谢小娥",
        },
      ],
      nantangList1: [
        {
          eventId: 50,
          bambooChange: 1,
          eventName: "zhong1",
          evnetInfo: "太子弘冀与景遂叔侄相残",
          eventTime: "时间:958年",
          person: "人物:弘冀、李璟、景遂、李煜",
        },
      ],
      songList1: [
        {
          eventId: 60,
          bambooChange: 1,
          eventName: "zhong1",
          evnetInfo: "王安石作《清明辇下怀金陵》怀念金陵",
          eventTime: "",
          person: "人物:王安石",
        },
        {
          eventId: 61,
          bambooChange: 2,
          eventName: "zhong1",
          evnetInfo: "欧阳修赠诗王安石",
          eventTime: "时间:1056年",
          person: "人物:欧阳修、王安石",
        },
        {
          eventId: 62,
          bambooChange: 3,
          eventName: "zhong1",
          evnetInfo: "王安石与苏东坡交往",
          eventTime: "时间:1084年",
          person: "人物:王安石、苏东坡、王胜之",
        },
        {
          eventId: 63,
          bambooChange: 1,
          eventName: "zhong1",
          evnetInfo: "宋高宗改名金陵为建康府",
          eventTime: "时间:1129年",
          person: "人物:宋高宗",
        },
      ],
      mingList1: [
        {
          eventId: 70,
          bambooChange: 1,
          eventName: "zhong1",
          evnetInfo: "程敏政南京结社",
          eventTime: "时间:1486年",
          person: "人物:程敏政",
        },
        {
          eventId: 71,
          bambooChange: 2,
          eventName: "zhong1",
          evnetInfo: "“长生馆会”金陵结社",
          eventTime: "时间:1617年",
          person: "人物:焦竑、钟惺",
        },
        {
          eventId: 72,
          bambooChange: 3,
          eventName: "zhong1",
          evnetInfo: "金陵大会/国门广业社初集",
          eventTime: "时间:1630年",
          person: "人物:姚澣",
        },
        {
          eventId: 73,
          bambooChange: 1,
          eventName: "zhong1",
          evnetInfo: "朱元璋在南京即位",
          eventTime: "时间:1368年",
          person: "人物:朱元璋",
        },
        {
          eventId: 74,
          bambooChange: 2,
          eventName: "zhong1",
          evnetInfo: "朱承等人开创金陵大社",
          eventTime: "时间:1604年",
          person: "人物:朱承",
        },
        {
          eventId: 75,
          bambooChange: 3,
          eventName: "zhong1",
          evnetInfo: "复社金陵大会",
          eventTime: "时间:1630年",
          person: "",
        },
        {
          eventId: 76,
          bambooChange: 1,
          eventName: "zhong1",
          evnetInfo: "刘城等发起国门广业社",
          eventTime: "时间:1630年",
          person: "人物:刘城、沈士柱、许元恺、吴应箕",
        },
        {
          eventId: 77,
          bambooChange: 2,
          eventName: "zhong1",
          evnetInfo: "国门广业社贴出《留都防乱公揭》",
          eventTime: "时间:1638年",
          person: "",
        },
      ],
      qingList1: [
        {
          eventId: 80,
          bambooChange: 1,
          eventName: "zhong1",
          evnetInfo: "陈文述居南京作三百多首诗",
          eventTime: "",
          person: "人物:陈文述",
        },
        {
          eventId: 81,
          bambooChange: 2,
          eventName: "zhong1",
          evnetInfo: "易顺鼎作《金陵杂感》20首",
          eventTime: "时间:1875年",
          person: "人物:易顺鼎",
        },
        {
          eventId: 82,
          bambooChange: 3,
          eventName: "zhong1",
          evnetInfo: "李渔在《闲情偶寄》中证明自己的园林美学",
          eventTime: "",
          person: "人物:李渔",
        },
        {
          eventId: 83,
          bambooChange: 1,
          eventName: "zhong1",
          evnetInfo: "袁枚辞官从文",
          eventTime: "",
          person: "人物:袁枚",
        },
        {
          eventId: 84,
          bambooChange: 2,
          eventName: "zhong1",
          evnetInfo: "城西成为人文荟萃之地",
          eventTime: "",
          person: "人物:袁枚、赵翼、沈德潜、黄景仁",
        },
        {
          eventId: 85,
          bambooChange: 3,
          eventName: "zhong1",
          evnetInfo: "陈文述作诗论金陵杏花村",
          eventTime: "",
          person: "人物:陈文述",
        },
      ],
      jindaiList1: [
        {
          eventId: 90,
          bambooChange: 1,
          eventName: "zhong1",
          evnetInfo: "新文学阵营对胡梦华进行围攻",
          eventTime: "时间:1922年",
          person: "人物:胡梦华、鲁迅、章洪熙",
        },
        {
          eventId: 91,
          bambooChange: 2,
          eventName: "zhong1",
          evnetInfo: "鲁迅记录在南京停留和求学的过程",
          eventTime: "时间:1913年-1932年",
          person: "人物:鲁迅",
        },
        {
          eventId: 92,
          bambooChange: 3,
          eventName: "zhong1",
          evnetInfo: "蒋介石授意成立“三民主义力行社”",
          eventTime: "时间:1932年",
          person: "人物:蒋介石、贺衷寒",
        },
        {
          eventId: 93,
          bambooChange: 1,
          eventName: "zhong1",
          evnetInfo: "徐志摩在南京成立“小文会”，并帮忙创办《诗刊》",
          eventTime: "时间:1929年",
          person: "人物:徐志摩",
        },
        {
          eventId: 94,
          bambooChange: 2,
          eventName: "zhong1",
          evnetInfo: "“中华全国文艺界抗敌协会”成立",
          eventTime: "时间:1938年",
          person: "人物:老舍、骆宾基",
        },
        {
          eventId: 95,
          bambooChange: 3,
          eventName: "zhong1",
          evnetInfo: "文艺界和梁实秋论争",
          eventTime: "时间:1938年-1939年",
          person: "人物:梁实秋",
        },
        {
          eventId: 96,
          bambooChange: 1,
          eventName: "zhong1",
          evnetInfo: "毛泽东说文艺发展要有中国特色",
          eventTime: "时间:1938年",
          person: "人物:毛泽东",
        },
        {
          eventId: 97,
          bambooChange: 2,
          eventName: "zhong1",
          evnetInfo: "多名作家发表南京大屠杀相关文学作品，揭露日军暴行",
          eventTime: "时间:1938年",
          person: "人物:范式之、林娜、李克痕、郭歧、白芜",
        },
      ],
      showCardInfo1: {
        Id: 1,
        content: "这种傻逼就不要跟他多讲了",
        person: "人物:陈作霖、陈作仪",
        time: "时间:1924年",
      },
    };
  },
  mounted() {
    let i = 0;
    const timer = setInterval(() => {
      if (i < 2) {
        this.$set(this.dongwuList, i, this.dongwuList1[i]);
      }
      if (i < 2) {
        this.$set(this.dongjinList, i, this.dongjinList1[i]);
      }
      if (i < 8) {
        this.$set(this.liuchaoList, i, this.liuchaoList1[i]);
      }
      if (i < 3) {
        this.$set(this.tangList, i, this.tangList1[i]);
      }
      if (i < 1) {
        this.$set(this.nantangList, i, this.nantangList1[i]);
      }
      if (i < 4) {
        this.$set(this.songList, i, this.songList1[i]);
      }
      if (i < 8) {
        this.$set(this.mingList, i, this.mingList1[i]);
      }
      if (i < 6) {
        this.$set(this.qingList, i, this.qingList1[i]);
      }
      if (i < 8) {
        this.$set(this.jindaiList, i, this.jindaiList1[i]);
      }
      i++;
    }, 1000);
  },
  methods: {
    change(event) {
      this.showCardInfo.Id = event.eventId;
      this.showCardInfo.content = event.evnetInfo;
      this.showCardInfo.person = event.person;
      this.showCardInfo.time = event.eventTime;
    },
    changeId() {
      this.showCardInfo.Id = 100;
    },
    changeArray(i) {
      if (i < this.dongwuList1.length) {
        this.$set(this.dongwuList, i, this.dongwuList1[i]);
      }
      // this.$forceUpdate();
      console.log("函数执行了");
    },
  },
};
</script>

<style scoped>
.bgc {
  position: relative;
  height: 740px;
  width: 100%;
  background-image: url("@/assets/bgcBamboo.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.title {
  position: absolute;
  left: 40px;
  color: #966664;
  font-family: "华文行楷", "STXingkai", serif;
}
.bambooContainer {
  position: absolute;
  bottom: 20px;
  width: 18px;
}
.bambooItem1 {
  position: relative;
  margin: 4px 0;
  width: 20px;
  height: 80px;
  /* background-color: #ece8e5; */
  background-image: url("@/assets/bamboo1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.bambooItem2 {
  position: relative;
  margin: 4px 0;
  width: 20px;
  height: 80px;
  /* background-color: #ece8e5; */
  background-image: url("@/assets/bamboo2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.bambooItem3 {
  position: relative;
  margin: 4px 0;
  width: 20px;
  height: 80px;
  /* background-color: #ece8e5; */
  background-image: url("@/assets/bamboo3.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.bambooItem1:hover {
  cursor: pointer;
  background-image: url("@/assets/bambooChange1.png");
}
.bambooItem2:hover {
  cursor: pointer;
  background-image: url("@/assets/bambooChange2.png");
}
.bambooItem3:hover {
  cursor: pointer;
  background-image: url("@/assets/bambooChange3.png");
}
.bambooCard {
  position: absolute;
  z-index: 5;
  left: 30px;
  width: 300px;
  height: 130px;
  background-image: url("@/assets/bambooContainer1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.bambooCard2 {
  position: absolute;
  z-index: 5;
  right: 30px;
  width: 300px;
  height: 130px;
  background-image: url("@/assets/bambooContainer2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.v-enter,
.v-leave-to {
  opacity: 0;
}

.v-enter-to,
.v-leave {
  opacity: 1;
}

.v-enter-active,
.v-leave-active {
  transition: all 1s linear;
}
.fontAdd {
  font-family: "华文行楷", "STXingkai", serif;
}
</style>
